<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./style.css">
	</head>
	<body>
		<div>
			<div id="header">
				header
			</div>
			<div id="container" class="clearfix">
				<div class="container-left">
					<div  id="left-side">
						left
					</div>

				</div>
				<div class="container-right">
					right
				</div>
			</div>
			<div id="footer">
				footer
			</div>
		</div>
	<!--
		1.事件处理(滚动事件)
		2.获取滚动的高度
		3.获取元素的高度
		4.使用js操作css改变样式
		5.absolute定位方式
	-->
	<script type="text/javascript">
		var GetId = function(id) {
			return document.getElementById(id);
		};

		var addEvent = function(obj,event,fun){
			if(obj.addEventListener){
				obj.addEventListener(event,fun,false);
			}else if(obj.attachEvent()){
				obj.attachEvent("on"+event,fun);
			}
		}

		var lnSide = GetId('left-side');

		addEvent(window,"scroll",function(){
			var scrollHeight = document.body.scrollTop;
			var contentHeight = GetId('container').offsetHeight-lnSide.offsetHeight;
			var containerTop = GetId('container').offsetTop;
			if(scrollHeight > containerTop && scrollHeight<=contentHeight+containerTop){
				lnSide.style.position = "absolute";
				lnSide.style.left = "0px";
				lnSide.style.top = scrollHeight-containerTop + 'px';
			}else if(scrollHeight<=containerTop){
				lnSide.style.position = "absolute";
				lnSide.style.left = "0px";
				lnSide.style.top =  '0px';
			}else if(scrollHeight>contentHeight+containerTop){
				lnSide.style.position = "absolute";
				lnSide.style.left = "0px";
				lnSide.style.top =  null;
				lnSide.style.bottom =  '0px';
			}
		})
	</script>
	</body>
</html>
